<template>
  <div class="wrapper">
    <swiper v-if="showSwiper" :options="swiperOptions">
      <!-- slides -->
      <swiper-slide v-for="item of list" :key="item.id">
        <img :src="item"
             alt="" class="swiper-img">
      </swiper-slide>

      <!-- Optional controls -->
      <div slot="pagination" class="swiper-pagination"></div>
      <!--    <div class="swiper-button-prev" slot="button-prev"></div>-->
      <!--    <div class="swiper-button-next" slot="button-next"></div>-->
      <!--    <div class="swiper-scrollbar" slot="scrollbar"></div>-->
    </swiper>
  </div>
</template>

<script>
import {computed} from "vue";

export default {
  name: 'Homeswiper',
  props: {
    list: Array
  },
  setup(props) {
    const swiperOptions = {
      pagination: '.swiper-pagination',
      paginationType: 'bullets',
      loop: true,
      autoplay: 3000
    }
    const showSwiper = computed(() => props.list.length)
    return {swiperOptions, showSwiper}
  }
}
</script>

<style lang="stylus" scoped>

@import "~styles/vaibles.styl"
.wrapper >>> .swiper-pagination-bullet-active
  background $bgColor !important

.wrapper
  //overflow hidden
  width 100%
  height 1rem
  padding-bottom 52%
  background #ddd

  .swiper-pagination
    margin-bottom 20px

  .swiper-img
    width 100%
    height auto

</style>
